<template>
  <view class="content">
    <!-- 定位区域 -->
    <view class="uni-flex uni-row uni-padding-10">
      <view class="uni-flex uni-row" @click="chooseLocation">
        <image class="uni-margin-right-sm location-icon" 
          :class="{ 'real-time': currentLocation?.isRealTime }"
          style="width: 40rpx; height: 40rpx;" 
          src="/static/icons/location.png"
          mode="aspectFit"></image>
        <text class="uni-h5">{{ locationName || '选择位置' }}</text>
        <view class="location-status" v-if="currentLocation?.isRealTime">
          <text class="status-dot"></text>
          <text class="status-text">实时</text>
        </view>
        <text class="uni-margin-left-xs">▼</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input" @click="goToSearch">
        <text class="iconfont icon-search"></text>
        <text class="placeholder">搜索商家、美食</text>
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots
        indicator-active-color="#ff6600">
        <swiper-item v-for="(item, index) in bannerList" :key="index" @click="navigateTo(item.link)">
          <image class="banner-image" :src="item.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 公告区域 -->
    <view class="notice-section" v-if="noticeList.length > 0">
      <view class="section-header">
        <text class="section-title">📢 校园公告</text>
      </view>
      <view class="notice-list">
        <view class="notice-item" v-for="(item, index) in noticeList" :key="item.id"
          @click="goToNoticeDetail(item.id)">
          <view class="notice-content">
            <text class="notice-title">{{ item.title }}</text>
          </view>
          <text class="notice-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 食堂模块 -->
    <view class="canteen-section">
      <view class="section-header">
        <text class="section-title">校园食堂</text>
        <text class="section-more" @click="goToCanteenList">更多</text>
      </view>
      <scroll-view scroll-x class="canteen-scroll">
        <view class="canteen-list">
          <view class="canteen-card" v-for="(item, index) in canteenList" :key="index"
            @click="goToCanteenDetail(item.id)">
            <image class="canteen-bg" :src="item.image" mode="aspectFill"></image>
            <view class="canteen-info">
              <view class="canteen-name">{{ item.name }}</view>
              <view class="canteen-floor">{{ item.floor }}</view>
              <view class="canteen-count">{{ item.merchantCount }}家商户</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 商户分类 -->
    <view class="category-section">
      <view class="section-header">
        <text class="section-title">商品分类</text>
      </view>
      <view class="category-list">
        <view class="category-item" v-for="(item, index) in categoryList" :key="index"
          @click="goToCategoryPage(item.id, item.name)">
          <view class="category-icon">
            <image :src="item.icon" style="width: 80rpx; height: 80rpx" />
          </view>
          <text class="category-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 商户列表 -->
    <view class="merchant-section">
      <view class="section-header">
        <text class="section-title">附近商家</text>
        <view class="sort-options">
          <text class="sort-option" :class="{ 'active': sortType === 'default' }"
            @click="setSortType('default')">默认</text>
          <text class="sort-option" :class="{ 'active': sortType === 'distance' }"
            @click="setSortType('distance')">距离</text>
          <text class="sort-option" :class="{ 'active': sortType === 'sales' }" @click="setSortType('sales')">月售</text>
          <!-- 评分排序暂时隐藏 -->
          <!-- <text class="sort-option" :class="{ 'active': sortType === 'rating' }"
            @click="setSortType('rating')">评分</text> -->
        </view>
      </view>

      <view class="merchant-list">
        <view class="merchant-card" v-for="(item, index) in filteredMerchantList" :key="index"
          @click="goToMerchantDetail(item.id)">
          <image class="merchant-logo" :src="item.logo" mode="aspectFill"></image>
          <view class="merchant-info">
            <view class="merchant-header">
              <text class="merchant-name">{{ item.name }}</text>
              <!-- 评分暂时隐藏 -->
              <!-- <view class="rating-box">
                <text class="rating-score">{{ item.rating }}</text>
                <text class="rating-star">★</text>
              </view> -->
            </view>
            <view class="merchant-meta">
              <text class="meta-item">{{ estimateTime(item.baseTime, item.distance) }}</text>
              <text class="meta-divider">|</text>
              <text class="meta-item">{{ item.distance }}km</text>
              <text class="meta-divider">|</text>
              <text class="meta-item">起送¥{{ item.minPrice }}</text>
            </view>
            <view class="merchant-tags">
              <view v-if="item.deliveryFee === 0" class="tag delivery-free">免配送费</view>
              <view v-else class="tag delivery-fee">配送费¥{{ item.deliveryFee }}</view>
              <view v-if="item.sales > 500" class="tag sales-tag">月售{{ item.sales }}+</view>
            </view>
          </view>
        </view>

        <!-- 加载更多区域 -->
        <view class="load-more-area">
          <uni-load-more :status="loadingStatus" :contentText="{
            contentdown: '上拉显示更多',
            contentrefresh: '正在加载...',
            contentnomore: '我是有底线的'
          }"></uni-load-more>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getCategoryList } from '@/api/category.js';
import { getCanteenPage } from '@/api/canteen.js';
// 计算预估配送时间
import estimateTime from '@/utils/time.js';
import {getMerchantPage} from '@/api/merchant.js'
import {getBannerList} from '@/api/banner.js'
import { getCurrentLocation, setCurrentLocation, fetchLocationList, requestLocationPermission, getRealTimeLocation, chooseLocationFromMap } from '@/utils/location.js';
import { getNoticeList, incrementNoticeViewCount } from '@/api/notice.js';


const locationName = ref('选择位置');
const currentLocation = ref(null);
const sortType = ref('default'); // 默认按默认排序
const pageSize = 10; // 每页显示的商户数量
const currentPage = ref(1); // 当前页码
const loadingStatus = ref('more'); // 加载状态：more-加载前，loading-加载中，noMore-没有更多了
const allMerchants = ref([]); // 所有商户列表
const bannerList = ref([]); // 轮播图列表
const canteenList = ref([]); // 食堂列表
const noticeList = ref([]); // 公告列表


// 商户列表
const filteredMerchantList = computed(() => {
  return allMerchants.value;
});

const categoryList = ref([]);
const isLoadingCategories = ref(false);



// 加载更多商户
const loadMoreMerchants = async () => {
  if (loadingStatus.value === 'loading' || loadingStatus.value === 'noMore') {
    return;
  }

  loadingStatus.value = 'loading';

  try {
    const res = await getMerchantPage({
      pageNo: currentPage.value,
      pageSize: pageSize,
      sortType: sortType.value,
      latitude: currentLocation.value?.latitude,
      longitude: currentLocation.value?.longitude
    });

    const { list, total } = res.data;
    
    // 添加到已加载的商户列表中
    allMerchants.value = [...allMerchants.value, ...list];
    
    // 更新页码和加载状态
    currentPage.value++;
    
    // 检查是否还有更多数据
    if (allMerchants.value.length >= total) {
      loadingStatus.value = 'noMore';
    } else {
      loadingStatus.value = 'more';
    }
  } catch (error) {
    console.error('加载商户列表失败:', error);
    loadingStatus.value = 'more';
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    });
  }
};

// 加载轮播图列表
const loadBannerList = async () => {
  try {
    const res = await getBannerList();
    bannerList.value = res.data;
  } catch (error) {
    console.error('加载轮播图列表失败:', error);
  }
};
  // 加载分类列表
const loadCategoryList = async () => {
  isLoadingCategories.value = true;
  try {
    const res = await getCategoryList();
    categoryList.value = res.data;
  } catch (error) {
    console.error('加载分类列表失败:', error);
    uni.showToast({
      title: '加载分类失败',
      icon: 'none'
    });
  } finally {
    isLoadingCategories.value = false;
  }
};

// 加载食堂列表
const loadCanteenList = async () => {
  try {
    const res = await getCanteenPage({
      pageNo: 1,
      pageSize: 3
    });
    canteenList.value = res.data.list;
  } catch (error) {
    console.error('加载食堂列表失败:', error);
    uni.showToast({
      title: '加载食堂列表失败',
      icon: 'none'
    });
  }
};

onMounted(async () => {
  console.log('开始加载首页数据');
  
  loadBannerList(); // 加载轮播图列表
  loadCanteenList(); // 加载食堂列表
  loadCategoryList(); // 加载分类列表
  loadNoticeList(); // 加载公告列表

  // 获取定位权限并获取当前位置
  try {
    await requestLocationPermission();
    const location = await getCurrentLocation(true); // 强制获取实时定位
    currentLocation.value = location;
    locationName.value = location.name;
    
    // 如果是实时定位，显示定位图标
    if (location.isRealTime) {
      console.log('已获取实时定位:', location);
    }
  } catch (error) {
    console.error('获取定位失败:', error);
    
    // 定位失败时直接使用默认位置（校园中心）
    try {
      const location = await getCurrentLocation(false);
      currentLocation.value = location;
      locationName.value = location.name;
      console.log('使用默认位置:', location);
    } catch (fallbackError) {
      console.error('获取默认位置也失败:', fallbackError);
      locationName.value = '选择位置';
    }
  }

  // 页面加载时的初始化操作
  currentPage.value = 1;
  allMerchants.value = [];
  loadMoreMerchants(); // 加载第一页数据
  

  // 监听页面滚动到底部事件
  const onReachBottom = () => {
    loadMoreMerchants();
  };

  // 添加页面滚动监听
  uni.$on('onReachBottom', onReachBottom);

  // 组件销毁时移除监听
  return () => {
    uni.$off('onReachBottom', onReachBottom);
  };
});

// 选择位置
const chooseLocation = async () => {
  const actionItems = ['重新定位', '手动选择位置'];
  
  uni.showActionSheet({
    itemList: actionItems,
    success: async function (res) {
      if (res.tapIndex === 0) {
        // 重新定位
        try {
          uni.showLoading({ title: '定位中...' });
          await requestLocationPermission();
          const location = await getCurrentLocation(true); // 强制获取实时定位
          currentLocation.value = location;
          locationName.value = location.name;
          
          // 重新加载商户列表
          currentPage.value = 1;
          allMerchants.value = [];
          loadingStatus.value = 'more';
          await loadMoreMerchants();
          
          uni.hideLoading();
          uni.showToast({
            title: '定位成功',
            icon: 'success'
          });
        } catch (error) {
          uni.hideLoading();
          console.error('重新定位失败:', error);
          
          // 定位失败时使用默认位置
          try {
            const location = await getCurrentLocation(false);
            currentLocation.value = location;
            locationName.value = location.name;
            
            // 重新加载商户列表
            currentPage.value = 1;
            allMerchants.value = [];
            loadingStatus.value = 'more';
            await loadMoreMerchants();
            
            uni.showToast({
              title: '使用默认位置',
              icon: 'none'
            });
          } catch (fallbackError) {
            uni.showToast({
              title: '定位失败，请手动选择位置',
              icon: 'none'
            });
          }
        }
      } else if (res.tapIndex === 1) {
        // 手动选择位置 - 使用微信地图选择
        try {
          uni.showLoading({ title: '打开地图中...' });
          const selectedLocation = await chooseLocationFromMap();
          
          currentLocation.value = selectedLocation;
          locationName.value = selectedLocation.name;
          
          // 重新加载商户列表
          currentPage.value = 1;
          allMerchants.value = [];
          loadingStatus.value = 'more';
          await loadMoreMerchants();
          
          uni.hideLoading();
          uni.showToast({
            title: '位置选择成功',
            icon: 'success'
          });
        } catch (error) {
          uni.hideLoading();
          if (error.message && !error.message.includes('用户取消')) {
            uni.showToast({
              title: error.message || '选择位置失败',
              icon: 'none'
            });
          }
        }
      }
    },
    fail: function (res) {
      console.log(res.errMsg);
    }
  });
};

// 轮播图链接跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url: url
  });
};

// 跳转到分类页面
const goToCategoryPage = (categoryId, categoryName) => {
  uni.navigateTo({
    url: `/pages/category/index?id=${categoryId}&name=${categoryName}`
  });
};

// 跳转到食堂详情页
const goToCanteenDetail = (canteenId) => {
  uni.navigateTo({
    url: `/pages/canteen/detail?id=${canteenId}`
  });
};

// 跳转到食堂列表页
const goToCanteenList = () => {
  uni.navigateTo({
    url: '/pages/canteen/list'
  });
};

// 设置排序方式
const setSortType = (type) => {
  if (sortType.value === type) return;
  sortType.value = type;
  // 重置页码和商户列表
  currentPage.value = 1;
  allMerchants.value = [];
  loadingStatus.value = 'more';
  loadMoreMerchants(); // 重新加载第一页数据
};

// 跳转到搜索页面
const goToSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  });
};

// 跳转到商户详情页
const goToMerchantDetail = (merchantId) => {
  uni.navigateTo({
    url: `/pages/merchant/detail?id=${merchantId}`
  });
};

// 加载公告列表
const loadNoticeList = async () => {
  try {
    const res = await getNoticeList();
    noticeList.value = res.data || [];
  } catch (error) {
    console.error('加载公告列表失败:', error);
    noticeList.value = [];
  }
};

// 跳转到公告详情页
const goToNoticeDetail = async (noticeId) => {
  try {
    // 增加查看次数
    await incrementNoticeViewCount(noticeId);
    
    // 跳转到公告详情页
    uni.navigateTo({
      url: `/pages/notice/detail?id=${noticeId}`
    });
  } catch (error) {
    console.error('更新公告查看次数失败:', error);
    // 即使更新失败也要跳转到详情页
    uni.navigateTo({
      url: `/pages/notice/detail?id=${noticeId}`
    });
  }
};


</script>

<script>
export default {
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    uni.$emit('onReachBottom');
  }
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background-color: #fafafa;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding-bottom: 30rpx;
}

/* 定位区域样式 */
.uni-flex {
  background: rgba(255, 255, 255, 0.95);
  padding: 24rpx 30rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20rpx);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.8);

  .uni-row {
    display: flex;
    align-items: center;

    &:active {
      transform: scale(0.98);
    }

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
      filter: drop-shadow(0 2rpx 4rpx rgba(255, 107, 107, 0.2));
      transition: all 0.3s ease;
      
      &.location-icon.real-time {
        filter: drop-shadow(0 2rpx 4rpx rgba(52, 199, 89, 0.3));
        animation: locationPulse 2s infinite;
      }
    }

    .uni-h5 {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
      background: linear-gradient(to right, #333, #666);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .location-status {
      display: flex;
      align-items: center;
      margin-left: 12rpx;
      padding: 4rpx 12rpx;
      background: rgba(52, 199, 89, 0.1);
      border-radius: 20rpx;
      border: 1rpx solid rgba(52, 199, 89, 0.2);
      
      .status-dot {
        width: 8rpx;
        height: 8rpx;
        background: #34c759;
        border-radius: 50%;
        margin-right: 6rpx;
        animation: statusDotPulse 1.5s infinite;
      }
      
      .status-text {
        font-size: 20rpx;
        color: #34c759;
        font-weight: 500;
      }
    }

    .uni-margin-left-xs {
      margin-left: 8rpx;
      color: #ff6b6b;
      font-size: 24rpx;
      transition: transform 0.3s ease;
    }
  }
}

@keyframes locationPulse {
  0% {
    filter: drop-shadow(0 2rpx 4rpx rgba(52, 199, 89, 0.3));
  }
  50% {
    filter: drop-shadow(0 2rpx 8rpx rgba(52, 199, 89, 0.5));
  }
  100% {
    filter: drop-shadow(0 2rpx 4rpx rgba(52, 199, 89, 0.3));
  }
}

@keyframes statusDotPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 搜索栏样式 */
.search-bar {
  padding: 20rpx 30rpx;
  margin-top: -10rpx;
  position: relative;
  z-index: 99;

  .search-input {
    background: #fff;
    border-radius: 40rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.08);
    transition: all 0.3s ease;
    border: 1rpx solid rgba(255, 107, 107, 0.1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1rpx;
      background: linear-gradient(to right,
          rgba(255, 154, 158, 0.2),
          rgba(255, 107, 107, 0.2) 50%,
          rgba(255, 154, 158, 0.2));
    }

    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.06);
    }

    .icon-search {
      font-size: 36rpx;
      background: $primary-gradient;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 16rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 24rpx;
        height: 24rpx;
        background: radial-gradient(circle, rgba(255, 107, 107, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: pulse 2s infinite;
      }
    }

    .placeholder {
      font-size: 28rpx;
      color: #999;
      flex: 1;

      &::before {
        content: '|';
        color: #eee;
        margin-right: 16rpx;
        font-weight: 200;
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  70% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* 轮播图样式 */
.banner-section {
  padding: 0 30rpx;
  margin-bottom: 30rpx;

  .banner-swiper {
    height: 300rpx;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);

    .banner-image {
      width: 100%;
      height: 100%;
      border-radius: 24rpx;
    }
  }
}

/* 公告区域样式 */
.notice-section {
  background-color: #fff;
  border-radius: 24rpx;
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(to right, #ff9a9e, #ff6b6b, #fad0c4);
  }

  .notice-list {
    .notice-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      transition: all 0.3s ease;
      position: relative;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        transform: translateX(8rpx);
        background-color: #fafafa;
      }

      .notice-content {
        flex: 1;
        overflow: hidden;

        .notice-title {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .notice-arrow {
        font-size: 32rpx;
        color: #ccc;
        margin-left: 16rpx;
        transition: all 0.3s ease;
      }

      &:active .notice-arrow {
        color: #ff6b6b;
        transform: translateX(4rpx);
      }
    }
  }
}

/* 食堂模块样式 */
.canteen-section {
  background-color: #fff;
  border-radius: 24rpx;
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
  border-radius: 6rpx;
}

.section-more {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.canteen-scroll {
  width: 100%;
  overflow-x: auto;
  margin: 10rpx 0;
  padding-right: 120rpx;
  /* 增加右侧内边距，使第三个食堂只显示一部分 */
}

.canteen-list {
  display: flex;
  padding: 10rpx 5rpx;
}

.canteen-card {
  width: 280rpx;
  height: 180rpx;
  margin-right: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.canteen-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.canteen-card:active .canteen-bg {
  transform: scale(1.05);
}

.canteen-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 30rpx 20rpx 15rpx;
  color: #fff;
}

.canteen-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.canteen-floor {
  font-size: 24rpx;
  margin-bottom: 4rpx;
  opacity: 0.9;
}

.canteen-count {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  display: inline-block;
  backdrop-filter: blur(4px);
}

/* 商户分类样式 */
.category-section {
  background-color: #fff;
  border-radius: 24rpx;
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx 0;
}

.category-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.category-icon {
  width: 90rpx;
  height: 90rpx;
  background-color: #f7f8fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
  transition: all 0.3s;
}

.category-item:active .category-icon {
  transform: scale(0.9);
  background-color: #fff1f0;
}

.category-name {
  font-size: 24rpx;
  color: #666;
}

/* 商户列表样式 */
.merchant-section {
  margin: 0 30rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: linear-gradient(to bottom, #ff9a9e, #ff6b6b);
        border-radius: 6rpx;
      }
    }

    .sort-options {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 30rpx;
      padding: 4rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

      .sort-option {
        padding: 8rpx 20rpx;
        font-size: 26rpx;
        color: #666;
        border-radius: 26rpx;
        transition: all 0.3s ease;

        &.active {
          background: linear-gradient(to right, #ff9a9e, #ff6b6b);
          color: #fff;
          font-weight: 500;
        }
      }
    }
  }

  .merchant-list {
    .merchant-card {
      background-color: #fff;
      border-radius: 24rpx;
      padding: 30rpx;
      margin-bottom: 24rpx;
      display: flex;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
      transition: transform 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      .merchant-logo {
        width: 140rpx;
        height: 140rpx;
        border-radius: 16rpx;
        margin-right: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      }

      .merchant-info {
        flex: 1;
        overflow: hidden;

        .merchant-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .merchant-name {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
          }

          .rating-box {
            display: flex;
            align-items: center;

            .rating-score {
              font-size: 28rpx;
              color: #ff6b6b;
              font-weight: 600;
              margin-right: 4rpx;
            }

            .rating-star {
              color: #ff6b6b;
              font-size: 24rpx;
            }
          }
        }

        .merchant-meta {
          margin-bottom: 16rpx;
          font-size: 26rpx;
          color: #666;

          .meta-item {
            margin-right: 12rpx;
          }

          .meta-divider {
            margin: 0 12rpx;
            color: #ddd;
          }
        }

        .merchant-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 12rpx;

          .tag {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 20rpx;

            &.delivery-free {
              color: #ff6b6b;
              background-color: rgba(255, 107, 107, 0.1);
            }

            &.delivery-fee {
              color: #666;
              background-color: #f8f8f8;
            }

            &.sales-tag {
              color: #1989fa;
              background-color: rgba(25, 137, 250, 0.1);
            }
          }
        }
      }
    }
  }
}

/* 加载更多区域样式 */
.load-more-area {
  padding: 30rpx 0;
  text-align: center;
  color: #999;
  font-size: 26rpx;
  letter-spacing: 2rpx;
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80rpx;
    height: 1rpx;
    background-color: #eee;
  }

  &::before {
    left: 30%;
  }

  &::after {
    right: 30%;
  }
}
</style>
